import "./BookAddPop.scss";
import React, { createRef } from "react";
import {Modal, Form, message} from "antd";
import { ReactComponent } from "../../class/ReactComponent";
import { BookAddForm } from "../BookAddForm/BookAddForm";
import tableBookList from "../../../common/function/tableBookList";
import { Moment } from "moment";
import {TableBookList} from "../../../common/class/TableBookList";

export namespace BookAddPop {
    export type ModalCloseState = "okay" | "cancel";
    export interface Props extends ReactComponent.Props {
        showPop: boolean;
        onCloseModal: (modalState?: ModalCloseState) => void;
        formData?: Partial<TableBookList.Data>;
    }
    export interface State extends ReactComponent.State {
    }
    export interface TRefForm {
        current: BookAddForm;
    }
}

export class BookAddPop extends ReactComponent<BookAddPop.Props, BookAddPop.State> {
    public refForm: BookAddPop.TRefForm = createRef();
    public render() {
        return (
            <Modal
                visible={this.props.showPop}
                cancelText="取消"
                okText="确认"
                centered={true}
                closable={true}
                onOk={this.closeModal.bind(this, "okay")}
                onCancel={this.closeModal.bind(this, "cancel")}
                className={this.getClsName("book-add-pop-component")}
            >{this.getBookAddForm()}</Modal>
        );
    }
    public getBookAddForm() {
        const FormElm = Form.create<BookAddForm.Props>({
        })(BookAddForm);
        return (<FormElm formData={this.props.formData} wrappedComponentRef={this.refForm} />);
    }
    public closeModal(state: BookAddPop.ModalCloseState = "cancel"): void {
        const refForm = this.refForm.current;
        const form = refForm.props.form;
        if (state === "okay") {
            form.validateFields((errors, values) => {
                if (!errors) {
                    if (refForm.props.formData.id) {
                        values.id = refForm.props.formData.id;
                    }
                    this.saveValues(values);
                    form.resetFields();
                    this.props.onCloseModal(state);
                }
            });
            return;
        }
        form.resetFields();
        this.props.onCloseModal(state);
    }
    public saveValues(values: any) {
        const baseData = {} as Partial<TableBookList.Data>;
        baseData.name = values.name;
        baseData.author = values.author;
        baseData.cover = values.cover;
        if (values.id) {
            baseData.id = values.id;
        }
        if (values.last_update_time) {
            baseData.last_update_time = (values.last_update_time as Moment).toDate().getTime();
        }
        if (values.update_frequency && values.update_frequency.trim()) {
            baseData.update_frequency = values.update_frequency;
        }
        if (values.update_method && values.update_method.trim()) {
            baseData.update_method = values.update_method;
        }
        if (values.update_refer_url && values.update_refer_url.trim()) {
            baseData.update_refer_url = values.update_refer_url;
        }
        tableBookList.saveData(baseData)
            .then(() => {
                message.success("更新成功");
            }).catch((err) => {
                message.error("更新失败");
                console.error(err);
            });
    }
}
